<!--
 * @Description: 
 * @Version: 
 * @Autor: tc
 * @Date: 2022-03-07 15:02:34
 * @LastEditors: tc
 * @LastEditTime: 2022-03-07 16:03:48
-->
<template>
    <el-dialog 
        :title="reservoirName" 
        :model-value="visible"
        :destroy-on-close="true"
        width="600px"
        :before-close="onCancel"
        :close-on-click-modal="false"
    >
        <el-table :data="faultData" :header-cell-style="{background: '#E8F0FE'}">
            <!-- <el-table-column type="index" label="序号" width="60"></el-table-column> -->
            <el-table-column
                v-for="(item, index) in cloumn"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width ? item.width:''"
                :formatter="item.formatter"
            >
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog_footer">
                <el-button @click="onCancel">取 消</el-button>
            </span>
        </template>
        
    </el-dialog>
</template>
<script>
 import bbcApi from '@/api/bbc'
import commonApi from '@/api/index'
import {formatTimestamp} from '@/utils/common'

export default {
    emits: ['onChange'],
    components:{
    },
    props:{
        visible:{
            default:false,
            type: Boolean
        },
        item:{
            default:()=>{
              return {}
            },
            type: Object
        },
    },
    watch:{
        visible(newValue){
            if(newValue){
                this.loading = true
                bbcApi.faultGetById({id:this.item.id})
                .then(res => {
                    console.log(res)
                    this.loading = false
                    this.reservoirName = res.data.reservoirName
                    this.faultData = res.data.list
                })
                .catch(() => {
                })
            }
        }
    },
    data(){
        return {
            loading:false,
            faultData:[],
            reservoirName:'',
            cloumn: [
                {
                    prop: 'positionName',
                    label: '故障部位'
                },
                {
                    prop: 'sensorCode',
                    label: '传感器编号',
                },
                {
                    prop: 'faultLxName',
                    label: '故障类型',
                },
                {
                    prop: 'stateName',
                    label: '状态',
                },
            ],
        }
    },
    methods:{
        onCancel(){
            this.$emit('onChange',{bool:false})
        },
    },
}
</script>
<style lang="scss" scoped>
    .form_height{
        max-height: 80vh;
        overflow-y: auto;
        // padding-bottom: 80px;
    }
    .width100{
        width: 100%;
    }
    .dialog_footer{
      display: flex;
      justify-content: center;
      // position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      padding: 20px 0;
      z-index: 1;
    }
    ::v-deep .tree_select .el-tree-node__content{
      height: 38px;
    }

</style>

